import request from "../../utils/request"
import moment from "moment"
import PubSub from "pubsub-js";

const app = getApp(); // 获取唯一全局小程序对象


Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false, // 播放状态
    musicId: "", // 音乐的id
    song: "", // 音乐详情
    durationTime: "00:00", // 音乐持续时间
    musicLink: "", // 音乐的播放地址
    currentTime: "00:00", // 音乐播放的实时时间
    currentWidth: 0, // 进度条的实时长度
  },

  // 定义方法： 全局保存音乐的id和播放状态
  saveMusic(isPlay) {
    this.setData({
      isPlay
    })
    app.globalData.isPlay = isPlay
  },

  // 获取音乐详情
  async getMusicDetails(ids) {
    // 获取音乐详情数据
    const result = await request("/song/detail", { ids })
    // 计算音乐总持续时间
    const durationTime = moment(result.songs[0].dt).format("mm:ss")

    // 保存音乐详情数据和音乐持续时间
    this.setData({
      song: result.songs[0],
      durationTime
    })

    // 修改导航栏标题
    wx.setNavigationBarTitle({
      title: this.data.song.name
    })
  },

  // 切换播放状态
  cutPalyStatus() {
    let isPlay = !this.data.isPlay
    this.setData({
      isPlay
    })

    const { musicId, musicLink } = this.data
    this.controlMusic(musicId, isPlay, musicLink)
  },

  // 控制音乐的播放与暂定 --- 播放的地址
  async controlMusic(id, isPlay, musicLink) {
    // 判断音乐的播放状态
    if (!isPlay) {
      this.backgroundAudioManager.pause() // 停止播放
      return
    }

    // 判断是否存在音乐的播放地址
    if (!musicLink) {
      // 获取音乐的播放地址
      const result = await request("/song/url", { id })
      // 保存音乐的播放地址
      musicLink = result.data[0].url
      this.setData({
        musicLink
      })
    }

    // 再次判断音乐的播放地址真是存在-- 部分歌曲存在版权问题，无法获取播放地址
    if (!musicLink) {
      // 提示用户
      wx.showToast({
        title: "请充钱",
        icon: "error"
      })
      return
    }

    this.backgroundAudioManager.src = musicLink // 播放音乐
    this.backgroundAudioManager.title = this.data.song.name // 设置音乐标题
  },

  // 点击上一首，下一首切换音乐
  cutMusic(event) {
    // 接收订阅： 接收切换音乐后音乐的id
    PubSub.subscribe("musicId", (msg, musicId) => {
      // 保存音乐的id
      this.setData({
        musicId
      })

      this.getMusicDetails(musicId) // 获取音乐详情
      this.controlMusic(musicId, true) // 控制音乐播放及获取音乐的播放地址
      PubSub.unsubscribe("musicId") // 取消订阅，避免出现多个订阅回调函数
    })

    const type = event.currentTarget.id // 拿到操作标识
    PubSub.publish("switchType", type) // 发布订阅切换音乐
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let musicId = options.musicId * 1 // 拿到音乐的id
    // 保存音乐的id
    this.setData({
      musicId
    })
    this.getMusicDetails(this.data.musicId) // 获取音乐的详情数据
    this.backgroundAudioManager = wx.getBackgroundAudioManager() // 获取背景音频管理器对象

    // 判断点击的音乐的id是否与全局保存的音乐的id,是否一致，及全局保存的音乐的播放状态
    if (app.globalData.isPlay && app.globalData.musicId.toString() === this.data.musicId.toString()) {
      this.setData({
        isPlay: true
      })
    }

    // 监听背景音频播放事件
    this.backgroundAudioManager.onPlay(() => {
      this.saveMusic(true)
      app.globalData.musicId = this.data.musicId
    })

    // 监听背景音频暂停事件
    this.backgroundAudioManager.onPause(() => {
      this.saveMusic(false)
    })

    // 监听背景音频停止事件
    this.backgroundAudioManager.onStop(() => {
      this.saveMusic(false)
    })

    // 监听背景音频播放进度更新事件
    this.backgroundAudioManager.onTimeUpdate(() => {
      // 计算音乐的实时时间
      const currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format("mm:ss")
      // 计算进度条的实时长度
      const currentWidth = this.backgroundAudioManager.currentTime * 450 / this.backgroundAudioManager.duration
      // 保存数据
      this.setData({
        currentTime,
        currentWidth
      })

    })

    // 监听背景音频自然播放结束事件
    this.backgroundAudioManager.onEnded(() => {
      // 实施播放时间归0， 进度条归0
      this.setData({
        currentTime: "00:00",
        currentWidth: 0
      })

      // 播放下一首
      this.cutMusic({
        currentTarget: {
          id: "next"
        }
      })
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})